<template>
	<transition name="fade">
		<div id="big" v-show="showState" @click="change">
		
		</div>
	</transition>
	
</template>

<script>
	export default {
		computed: {
			showState(){
				//获得仓库当中的状态值
				return this.$store.state.bigState;
			}
		},
		methods: {
			change(){
				this.$store.commit('changeState');
			}
		}
	}
</script>
	
<style>
	#big{
		position:absolute;
		z-index: 100;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0; 
		background:rgba(0,0,0,0.3);
	}
	.fade-enter-active,.fade-leave-active{
		transition: all 0.5s;
	}
	.fade-enter,.fade-leave-to{
		opacity: 0;
	}
</style>